<template>
  <el-dialog
    title="活动详情"
    :visible.sync="dialogVisible"
    width="1000px"
    :before-close="handleClose"
    class="activity-detail-dialog"
  >
    <div class="dialog-content" v-loading="loading">

      <h4 class="section-title">基础信息</h4>
      <el-row :gutter="20" class="detail-block">
        <el-col :span="12" class="info-item">
          <span class="info-label">活动编号:</span>
          <span class="info-value">{{ detailData.baseInfo.activityId }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="info-label">活动名称:</span>
          <span class="info-value">{{ detailData.baseInfo.activityName }}</span>
        </el-col>

        <el-col :span="12" class="info-item">
          <span class="info-label">开始时间:</span>
          <span class="info-value">{{ detailData.baseInfo.startTime }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="info-label">截止时间:</span>
          <span class="info-value">{{ detailData.baseInfo.endTime }}</span>
        </el-col>

        <el-col :span="12" class="info-item">
          <span class="info-label">创建时间:</span>
          <span class="info-value">{{ detailData.baseInfo.createTime }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="info-label">活动状态:</span>
          <span :class="['info-value', getStatusClass(detailData.baseInfo.status)]">{{ detailData.baseInfo.statusName }}</span>
        </el-col>

        <el-col :span="12" class="info-item">
          <span class="info-label">运营状态:</span>
          <span class="info-value">{{ detailData.baseInfo.operationStatus }}</span>
        </el-col>
      </el-row>

      <h4 class="section-title">充值优惠</h4>
      <el-row :gutter="20" class="detail-block">
        <el-col :span="12" class="info-item">
          <span class="info-label">充值金额:</span>
          <span class="info-value price">{{ detailData.offerInfo.rechargeAmount }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="info-label">充值优惠:</span>
          <span class="info-value">{{ detailData.offerInfo.rechargeOffer }}</span>
        </el-col>

        <el-col :span="12" class="info-item">
          <span class="info-label">充值次数:</span>
          <span class="info-value">{{ detailData.offerInfo.rechargeCount }}</span>
        </el-col>
      </el-row>

      <!-- 赠送礼品时显示 -->
      <el-table
        :data="detailData.giftInfo"
        border
        style="width: 100%;"
        :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
      >
        <el-table-column prop="index" label="序号" width="60" align="center" />
        <el-table-column label="商品信息">
          <template slot-scope="scope">
            <div class="product-info-cell">
              <img :src="scope.row.imageUrl" class="product-image">
              <div class="product-details">
                <p class="product-name">{{ scope.row.productName }}</p>
                <p class="product-code">{{ scope.row.productCode }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="package" label="包装" align="center" width="120" />
        <el-table-column prop="unitCount" label="数量 / 份" align="center" width="120" />
        <el-table-column prop="sentCount" label="已赠送" align="center" width="120" />
      </el-table>

      <h4 class="section-title">门店信息</h4>
      <el-row :gutter="20" class="detail-block">
        <el-col :span="12" class="info-item">
          <span class="info-label">门店名称:</span>
          <span class="info-value">{{ detailData.storeInfo.name }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="info-label">门店编号:</span>
          <span class="info-value">{{ detailData.storeInfo.id }}</span>
        </el-col>
      </el-row>

      <h4 class="section-title">充值概况</h4>
      <el-table
        :data="[detailData.summary]"
        border
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
        class="summary-table"
      >
        <el-table-column prop="orderCount" label="订单数量" align="center" />
        <el-table-column prop="paidAmount" label="支付金额" align="right" />
        <el-table-column prop="giftAmount" label="赠送金额" align="right" />
        <el-table-column prop="giftCount" label="赠送礼品" align="center" />
      </el-table>

    </div>

    </el-dialog>
</template>

<script>
export default {
  props: {
    // 控制弹窗是否显示
    visible: {
      type: Boolean,
      default: false
    },
    // 活动编号，用于加载详情
    activityId: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      loading: false,
      // 模拟详情数据结构，匹配设计稿中的内容
      detailData: {
        baseInfo: {
          activityId: '23652632562362',
          activityName: '这是活动名这是活动名',
          startTime: '2025-09-04 19:11:20',
          endTime: '2025-09-04 19:11:20',
          createTime: '2025-09-04 19:11:20',
          status: 2, // 2: 进行中
          statusName: '进行中',
          operationStatus: '开启中'
        },
        offerInfo: {
          rechargeAmount: '¥1000.00',
          rechargeCount: '100次',
          rechargeOffer: '赠送¥200.00 / 赠送礼品(3选1, 价值¥200.00)'
        },
        giftInfo: [
          {
            index: 1,
            imageUrl: '/static/product-1.png',
            productName: '这是商品名称超过一行的一部分...替代',
            productCode: '123654789562',
            package: '最小包装',
            unitCount: 2,
            sentCount: '100份'
          },
          {
            index: 2,
            imageUrl: '/static/product-2.png',
            productName: '这是商品名称超过一行的一部分...替代',
            productCode: '123654789562',
            package: '中包装',
            unitCount: 1,
            sentCount: '100份'
          }
        ],
        storeInfo: {
          name: '这是门店名称',
          id: '65986215652565554'
        },
        summary: {
          orderCount: '100单',
          paidAmount: '¥100000.00',
          giftAmount: '¥20000.00',
          giftCount: '100份'
        }
      }
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
      if (val && this.activityId) {
        this.getActivityDetail(this.activityId)
      }
    }
  },
  methods: {
    /**
     * @description 根据状态返回样式类
     */
    getStatusClass(status) {
        //  1=未开始(灰色), 2=进行中(绿色), 3=已结束(红色)
        switch (status) {
            case 2:
                return 'status-success';
            case 3:
                return 'status-danger';
            case 1:
            default:
                return 'status-info';
        }
    },
    /**
     * @description 关闭弹窗并通知父组件
     */
    handleClose() {
      // 触发父组件的 update:visible 事件来关闭弹窗
      this.$emit('update:visible', false)
    },

    /**
     * @description 模拟请求活动详情数据
     */
    getActivityDetail(id) {
      this.loading = true
      // 假设调用 API 获取详情
      console.log(`正在加载活动 ${id} 的详情...`)
      setTimeout(() => {
        this.loading = false
        this.$message.success('活动详情加载成功')
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.activity-detail-dialog {

  .dialog-content {
    padding: 0 10px;
    max-height: 70vh;
    overflow-y: auto;
  }

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin: 20px 0 15px 0;
    padding-left: 10px;
    border-left: 4px solid #409EFF;
  }

  .detail-block {
    margin-bottom: 5px;
  }

  /* 通用信息项样式 */
  .info-item {
    line-height: 2;
    font-size: 14px;
    margin-bottom: 5px;
    display: flex;

    .info-label {
      color: #909399;
      display: inline-block;
      width: 90px;
      text-align: right;
      margin-right: 8px;
      flex-shrink: 0;
    }
    .info-value {
      color: #303133;
      font-weight: 500;
      word-break: break-all;
    }

    /* 状态颜色 */
    .status-success {
      color: #67C23A; /* 绿色 */
    }
    .status-danger {
      color: #F56C6C; /* 红色 */
    }
    .status-info {
      color: #909399; /* 灰色 */
    }

    .price {
        font-weight: bold;
        color: #F07505;
    }
  }

  /* 商品信息表格单元格样式 */
  .product-info-cell {
    display: flex;
    align-items: center;
    padding: 5px 0;

    .product-image {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      border: 1px solid #EBEEF5;
      flex-shrink: 0;
    }

    .product-details {
      min-width: 0;

      .product-name {
        font-size: 14px;
        color: #303133;
        margin: 0;
        line-height: 1.2;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .product-code {
        font-size: 12px;
        color: #909399;
        margin: 4px 0 0 0;
        line-height: 1.2;
      }
    }
  }

  /* 充值概况表格样式 */
  .summary-table {
      margin-top: 10px;
      // 确保金额列右对齐
      ::v-deep .el-table__cell:nth-child(2) .cell,
      ::v-deep .el-table__cell:nth-child(3) .cell {
          text-align: right;
      }
  }
}
</style>
